<template>
  <div class="network_hotspot content-view">
    <a-row :gutter="15">
      <a-col :span="15">
        <div class="gutter-box">
          <div class="topic-content">
            <sectionTitle titleName="热点话题聚合">
              <slot>
                <img src="../../../assets/images/title/topic-ico.png" alt />
              </slot>
            </sectionTitle>
            <div class="topic-list-content">
              <a-tabs default-active-key="1" :animated="false">
                <a-tab-pane key="1" tab="本日">
                  <newList :newsList="newsList"></newList>
                </a-tab-pane>
                <a-tab-pane key="2" tab="近一周">
                  <newList :newsList="newsList"></newList>
                </a-tab-pane>
                <a-tab-pane key="3" tab="近一月"></a-tab-pane>
              </a-tabs>
            </div>
          </div>
        </div>
      </a-col>
      <a-col :span="9">
        <div class="hotspot-content">
          <sectionTitle titleName="热词指数分析" des="(Top50)">
            <slot>
              <img src="../../../assets/images/title/hot-ico.png" alt />
            </slot>
          </sectionTitle>
          <div class="hotspot-tab-content">
            <a-tabs v-model="hotWordKey" :animated="false" @change="hotWordChange">
              <a-tab-pane key="day" tab="本日">
                <div class="hot-word-list" v-if="this.hotWordList.length !== 0">
                  <ul>
                    <li
                      v-for="(item,index) in hotWordList"
                      :key="item.id"
                      :class="{'first': index == 0,'second': index == 1,'third': index == 2}"
                    >
                      <span class="list-index">{{index+1}}</span>
                      <span class="word-name">{{item.wordName}}</span>
                      <a-progress :percent="item.percent" style="width:260px;">
                        <template #format="percent">
                          <span class="word-percent">{{ percent }}</span>
                        </template>
                      </a-progress>
                    </li>
                  </ul>
                  <div class="more-btn" v-if="!isShowMore">
                    <span @click="more()">
                      查看完整榜单
                      <a-icon type="down" />
                    </span>
                  </div>
                  <div class="more-btn" v-else>
                    <span @click="putAway">
                      收起
                      <a-icon type="up" />
                    </span>
                  </div>
                </div>
                <div class="empty" v-else>
                  <a-empty></a-empty>
                </div>
              </a-tab-pane>
              <a-tab-pane key="week" tab="近一周">
                <div class="hot-word-list" v-if="this.hotWordList.length !== 0">
                  <ul>
                    <li
                      v-for="(item,index) in hotWordList"
                      :key="item.id"
                      :class="{'first': index == 0,'second': index == 1,'third': index == 2}"
                    >
                      <span class="list-index">{{index+1}}</span>
                      <span class="word-name">{{item.wordName}}</span>
                      <a-progress :percent="item.percent" style="width:260px;">
                        <template #format="percent">
                          <span class="word-percent">{{ percent }}</span>
                        </template>
                      </a-progress>
                    </li>
                  </ul>
                  <div class="more-btn" v-if="!isShowMore">
                    <span @click="more()">
                      查看完整榜单
                      <a-icon type="down" />
                    </span>
                  </div>
                  <div class="more-btn" v-else>
                    <span @click="putAway">
                      收起
                      <a-icon type="up" />
                    </span>
                  </div>
                </div>
                <div class="empty" v-else>
                  <a-empty></a-empty>
                </div>
              </a-tab-pane>
              <a-tab-pane key="month" tab="近一月">
                <div class="hot-word-list" v-if="this.hotWordList.length !== 0">
                  <ul>
                    <li
                      v-for="(item,index) in hotWordList"
                      :key="item.id"
                      :class="{'first': index == 0,'second': index == 1,'third': index == 2}"
                    >
                      <span class="list-index">{{index+1}}</span>
                      <span class="word-name">{{item.wordName}}</span>
                      <a-progress :percent="item.percent" style="width:260px;">
                        <template #format="percent">
                          <span class="word-percent">{{ percent }}</span>
                        </template>
                      </a-progress>
                    </li>
                  </ul>
                  <div class="more-btn" v-if="!isShowMore">
                    <span @click="more()">
                      查看完整榜单
                      <a-icon type="down" />
                    </span>
                  </div>
                  <div class="more-btn" v-else>
                    <span @click="putAway">
                      收起
                      <a-icon type="up" />
                    </span>
                  </div>
                </div>
                <div class="empty" v-else>
                  <a-empty></a-empty>
                </div>
              </a-tab-pane>
            </a-tabs>
          </div>
        </div>
        <a-affix :offset-top="55">
          <div class="news-hot">
            <sectionTitle titleName="融头条">
              <slot>
                <img src="../../../assets/images/title/new-ico.png" alt />
              </slot>
            </sectionTitle>
            <div class="swiper-tab" v-show="swiperShow">
              <swiper :logoList="logoList" @newsLogoClick="newsLogoClick"></swiper>
            </div>
            <div class="news-content" ref="newContent">
              <newList :newsList="logoNewsList" :newType="2"></newList>
            </div>
          </div>
        </a-affix>
      </a-col>
    </a-row>
    <backTop />
  </div>
</template>

<script>
import sectionTitle from "components/base/sectionTitle";
import newList from "components/base/newList";
import swiper from "components/base/swiper";
import backTop from "components/base/backTop";
import { getHotWord, getNetworkLogo,getNewsList} from "@/api/networkHotspot";
export default {
  components: {
    sectionTitle,
    newList,
    swiper,
    backTop
  },
  data() {
    return {
      hotWordKey: "day", //热词切换的值
      isShowMore: false,
      swiperShow: false,
      newsList: [
        {
          id: 1,
          isclick: true,
          title:
            "德国孔院举办中医抗新冠疫情线上研讨会|疫情|新冠肺炎德国孔院举办中医抗新冠疫情",
          pubdate:"2020-07-30 08:10:56",
          sitename:"新华网",
          source:"中国共产党新闻网",
          imgs:
            "https://p9.pstatp.com/list/190x124/pgc-image/d6edc92abc3a4a68a91a8427af94c0a1",
          content:
            "1小时前 - 新华社柏林5月11日电(记者张毅荣)德国施特拉尔松德孔子学院日前联合汉堡大学附属埃彭多夫医院汉萨美安中医中心,共同组织举办了数场中医抗击新。施特拉尔松德孔子学院日前联合汉堡大学附属埃彭多夫施特拉尔松",
        },
        {
          id: 2,
           title:
            "德国孔院举办中医抗新冠疫情线上研讨会|疫情|新冠肺炎德国孔院举办中医抗新冠疫情",
          pubdate:"2020-07-30 08:10:56",
          sitename:"新华网",
          source:"中国共产党新闻网",
          imgs:
            "https://p9.pstatp.com/list/190x124/pgc-image/d6edc92abc3a4a68a91a8427af94c0a1",
          content:
            "1小时前 - 新华社柏林5月11日电(记者张毅荣)德国施特拉尔松德孔子学院日前联合汉堡大学附属埃彭多夫医院汉萨美安中医中心,共同组织举办了数场中医抗击新。施特拉尔松德孔子学院日前联合汉堡大学附属埃彭多夫施特拉尔松",
        },
        {
          id: 3,
          title:
            "德国孔院举办中医抗新冠疫情线上研讨会|疫情|新冠肺炎德国孔院举办中医抗新冠疫情",
          pubdate:"2020-07-30 08:10:56",
          sitename:"新华网",
          source:"中国共产党新闻网",
          imgs:
            "https://p9.pstatp.com/list/190x124/pgc-image/d6edc92abc3a4a68a91a8427af94c0a1",
          content:
            "1小时前 - 新华社柏林5月11日电(记者张毅荣)德国施特拉尔松德孔子学院日前联合汉堡大学附属埃彭多夫医院汉萨美安中医中心,共同组织举办了数场中医抗击新。施特拉尔松德孔子学院日前联合汉堡大学附属埃彭多夫施特拉尔松",
        }
      ],
      logoNewsList:[],
      hotWordList: [],
      hotWordAllList: [],
      hotWordTop10: [],
      logoList: [], //融头条logo
    };
  },
  mounted() {
    this.watchClientHeight();
    this.gethotWordList();
    this.getNetworkLogo();
  },
  methods: {
    watchClientHeight() {
      // 监听window的resize事件．在浏览器窗口变化时再设置下区域高度．
      const _this = this;
      window.onresize = function temp() {
        _this.$refs.newContent.style.maxHeight =
          document.body.clientHeight - 275 + "px";
      };
      this.$refs.newContent.style.maxHeight =
        document.body.clientHeight - 275 + "px";
    },
    //查看更多榜单
    more() {
      this.hotWordList = this.hotWordAllList;
      this.isShowMore = true;
    },
    //榜单收起
    putAway() {
      this.hotWordList = this.hotWordTop10;
      this.isShowMore = false;
    },
    //融头条站点点击
    newsLogoClick(val) {
      var param = {
        columnName:val.columnName ===null?'':val.columnName,
        siteName:val.siteName
      }
      this.getNewsList(param)
    },
    //获取融头条列表
    getNewsList(params){
      getNewsList(params)
        .then((res) => {
         this.logoNewsList = res.data
        })
        .catch((err) => {
          this.$message.destroy();
          this.$message.error(err);
        });
    },
    //热词top切换
    hotWordChange() {
      this.isShowMore = false;
      this.gethotWordList();
    },
    //获取热词列表
    gethotWordList() {
      getHotWord(this.hotWordKey)
        .then((res) => {
          this.hotWordAllList = res.data;
          this.hotWordTop10 = [];
          res.data.forEach((item, index) => {
            if (index < 10) {
              this.hotWordTop10.push(item);
            }
          });
          this.hotWordList = this.hotWordTop10;
        })
        .catch((err) => {
          that.$message.destroy();
          that.$message.error(err);
        });
    },
    //获取融头条logo
    getNetworkLogo() {
      getNetworkLogo()
        .then((res) => {
          this.logoList = res.data;
          this.swiperShow = true;
        })
        .catch((err) => {
          that.$message.destroy();
          that.$message.error(err);
        });
    },
  },
};
</script>

<style lang="stylus" scoped>
.gutter-box {
  background: #ffffff;
  min-height: 300px;
}

.topic-content {
  padding: 0 25px 30px 20px;
  box-sizing: border-box;
}

.hotspot-content {
  padding: 0 25px 20px 20px;
  background: #ffffff;
  min-height: 300px;

  .hot-word-list {
    li {
      color: #333;
      margin-bottom: 12px;

      .word-name {
        width: 100px;
        padding-left: 12px;
        box-sizing: border-box;
        display: inline-block;
        font-size: 15px;
      }

      .list-index {
        font-size: 17px;
        text-align: center;
        display: inline-block;
        width: 33px;
        color: #919191;
      }

      .word-percent {
        font-size: 16px;
        color: #333;
        margin-left: 10px;
      }
    }

    .more-btn {
      font-size: 14px;
      color: #889297;
      text-align: center;
      margin-top: 15px;

      span {
        cursor: pointer;
      }
    }
  }
}

.news-hot {
  padding: 0 15px 20px 15px;
  background: #ffffff;
  min-height: 400px;
  margin-top: 15px;
  overflow-y: hidden;
}

.news-content {
  overflow-y: auto;
}
</style>